<!--贪吃蛇-->
<template>
    <div class="content">
        <div class="content-toolbar">
            <div class="content-toolbar-title">
                <span>贪吃蛇</span>
            </div>
            <div class="content-toolbar-button">
                <!--<el-button type="primary" @click="">开始</el-button>-->
                <!--<el-button type="primary" @click="">暂停</el-button>-->
            </div>
        </div>
        <div class="content-konva">
            <div class="canvas-content" @contextmenu="contextmenu" ref="konvaRef" id="canvas-konva"></div>
        </div>
    </div>
</template>

<script setup>
    import { ref, onMounted } from "vue";
    import konvaDraw from './index'


    const konvaRef = ref();


    // 初始化konva
    const initialization = () => {
        const konvaWidth = konvaRef.value.offsetWidth;
        const konvaHeight = konvaRef.value.offsetHeight;
        konvaDraw.init('canvas-konva',konvaWidth,konvaHeight)
    };

    // 去除浏览器自带的鼠标点击事件
    const contextmenu =(e)=>{
        e.preventDefault();
    };

    // 页面挂载后才能绘制
    onMounted(() => {
        initialization()
    });

</script>

<style scoped>
    .content{
        width: 100%;
        height: 100%;
    }
    .content-toolbar{
        width: 98%;
        height: 50px;
        margin-left: 10px;
        display: flex;
        justify-content: left;
        align-items: center;
    }
    .content-toolbar-title{
        width: 10%;
        float: left;
        text-align: left;
        font-size: 25px;
        font-weight: 700;
    }
    .content-toolbar-button{
        width: 80%;
        text-align: left;
        font-size: 25px;
    }
    .content-konva{
        width: 100%;
        height: calc(100% - 50px);
        display: flex;
        justify-content: center;
        align-items: center;

    }
    .canvas-content{
        width:500px;
        height: 800px;
        background-color: #bebbc4;
    }

</style>